<template>
    <div class="factoryCheckIn">
        <div style="width: 100%; background-color: var(--color-base); height: 500px;">
            <div style="width: 1200px; margin: 0 auto;">
                <span class="title">产能出海管理平台</span>
            </div>
            <div style="display: flex; width: 1200px; margin: 0 auto;">
                <div style="flex: 1;">
                    <div class="title">
                        加入我们，您可以
                    </div>
                    <ul class="details_info">
                        <li>
                            更快 瞬时把握产品走向，掌控竞品市场动态
                        </li>
                        <li>
                            更准 直接对接终端客户，摆脱中间无效需求
                        </li>
                        <li>
                            更劲 专业服务至真至诚，百万商机供您选择
                        </li>
                    </ul>
                </div>
                <div style="flex: 1;">
                    <div style="height: 60px; line-height: 30px; position: relative;">
                        <div ref="card_style4" class="round_card" style="top: 0px; opacity: 0; transform: scale(0.8);">
                            <div style="width: 450px; background-color: var(--color-common-ff); padding-left: 20px; border-radius: 5px;">
                                恭喜精品工厂 陵县*干工*设*有限公司 接到 大额 订单<br>
                                2025-03-18 16:00:15
                            </div>
                        </div>
                        <div ref="card_style3" class="round_card" style="top: 75px; opacity: 0.5; transform: scale(0.9);">
                            <div style="width: 450px; background-color: var(--color-common-ff); padding-left: 20px; border-radius: 5px;">
                                恭喜精品工厂 陵县*干工*设*有限公司 接到 大额 订单<br>
                                2025-03-18 16:00:15
                            </div>
                        </div>
                        <div ref="card_style2" class="round_card" style="top: 150px; opacity: 1; transform: scale(1);">
                            <div style="width: 450px; background-color: var(--color-common-ff); padding-left: 20px; border-radius: 5px;">
                                恭喜精品工厂 陵县*干工*设*有限公司 接到 大额 订单<br>
                                2025-03-18 16:00:15
                            </div>
                        </div>
                        <div ref="card_style1" class="round_card" style="top: 225px; opacity: 0.5; transform: scale(0.9);">
                            <div style="width: 450px; background-color: var(--color-common-ff); padding-left: 20px; border-radius: 5px;">
                                恭喜精品工厂 陵县*干工*设*有限公司 接到 大额 订单<br>
                                2025-03-18 16:00:15
                            </div>
                        </div>
                        <div ref="card_style0" class="round_card" style="top: 300px; opacity: 0; transform: scale(0.8);">
                            <div style="width: 450px; background-color: var(--color-common-ff); padding-left: 20px; border-radius: 5px;">
                                恭喜精品工厂 陵县*干工*设*有限公司 接到 大额 订单<br>
                                2025-03-18 16:00:15
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="list_bg">
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '0'}" @click="activeIndex = '0'">全部类目</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '1'}" @click="activeIndex = '1'">家居家具</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '2'}" @click="activeIndex = '2'">生活电器</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '3'}" @click="activeIndex = '3'">宠物</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '4'}" @click="activeIndex = '4'">美容个护</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '5'}" @click="activeIndex = '5'">园艺庭院</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '6'}" @click="activeIndex = '6'">3C数码</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '7'}" @click="activeIndex = '7'">运动户外</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '8'}" @click="activeIndex = '8'">母婴玩具</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '9'}" @click="activeIndex = '9'">汽配</span>
                </div>
                <div style="flex: 1;height: 60px; line-height: 60px; text-align: center;">
                    <span :class="{list_active: activeIndex == '10'}" @click="activeIndex = '10'">办公产品</span>
                </div>
            </div>
        </div>
        <div>
            <div style="width: 1200px; margin: 0 auto; display: flex;">
                <div style="flex: 1;">
                    <div class="factory_card">
                        <div class="title">所有工厂</div>
                        <div class="info">9999999个</div>
                        <img style="width: 240px; margin: 0 auto;" src="./../../assets/pages/checkin001.png" alt="">
                    </div>
                </div>
                <div style="flex: 1;">
                    <div class="factory_card">
                        <div class="title">精品工厂</div>
                        <div class="info">999999个</div>
                        <img style="width: 240px; margin: 0 auto;" src="./../../assets/pages/checkin002.png" alt="">
                    </div>
                </div>
                <div style="flex: 1;">
                    <div class="factory_card">
                        <div class="title">达成交易额</div>
                        <div class="info">$ 99 999 999.99</div>
                        <img style="width: 240px; margin: 0 auto;" src="./../../assets/pages/checkin003.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'factoryCheckIn',
    data() {
        return {
            loopDomList: [0, 75, 150, 225, 300],
            loopTime: 20,
            loopInterval: null,
            activeIndex: "0"
        }
    },
    computed: {
        test() {
            return 1;
        },
    },
    mounted() {
        var that = this
        that.loopInterval = setInterval(function() {
            for(var i=0; i<that.loopDomList.length; i++) {
                var newTop = that.loopDomList[i] - 1
                if(newTop < 0) {
                    newTop = 375
                }
                that.loopDomList[i] = newTop
            }
            that.createLoopForList()
        }, that.loopTime);
    },
    methods: {
        createLoopForList() {
            var onceTop,onceOpacity,onceScale;
            for(var i=0; i<this.loopDomList.length; i++) {
                onceTop = this.loopDomList[i]
                if(onceTop<150) {
                    onceOpacity = 1 - 1*((150-onceTop)/150)
                    onceScale = 1 - 0.2*((150-onceTop)/150)
                } else if(onceTop>=150 && onceTop<=300) {
                    onceOpacity = 1*((300-onceTop)/150)
                    onceScale = 0.8 + 0.2*((300-onceTop)/150)
                } else {
                    onceOpacity = 0
                    onceScale = 0
                }
                var sDom = this.$refs["card_style"+i]
                sDom.style.top = onceTop+"px"
                sDom.style.opacity = onceOpacity.toString()
                sDom.style.transform = "scale("+onceScale+")"
            }
        }
    }
}
</script>
<style scoped>
.title {
    line-height: 60px;
    font-size: var(--fontsize-18);
    font-weight: bold;
    color: var(--color-common-ff);
}
.details_info {
    line-height: 60px;
    font-size: var(--fontsize-16);
    color: var(--color-common-ff);
}
.round_card {
    position: absolute;
    left: 50px;
}
.list_bg {
    width: 1200px;
    margin: 20px auto;
    border-radius: 30px;
    display: flex;
    box-shadow: 0px 0px 40px var(--color-common-d9);
}
.list_bg span {
    cursor: pointer;
}
.list_active {
    padding: 5px 10px;
    background: var(--color-base);
    border-radius: 15px;
    color: var(--color-common-ff);
}
.factory_card {
    width: 300px;
    height: 240px;
    margin: 0 auto;
    box-shadow: 0px 0px 40px var(--color-common-d9);
    border-radius: 15px;
}
.factory_card .title {
    font-size: var(--fontsize-14);
    color: var(--color-font);
    text-indent: 20px;
}
.factory_card .info {
    font-size: var(--fontsize-20);
    color: var(--color-base);
    text-indent: 20px;
    font-weight: bold;
}
/* @keyframes roundPlane {
    0% { transform: translateY(300px) scale(0.8); opacity: 0;}
    50% { transform: translateY(150px) scale(1); opacity: 1; }
    100% { transform: translateY(0px) scale(0.8); opacity: 0; }
} */
</style>